<template>
  <div class="home">
    <a-button type="primary">
      Primary
    </a-button>
    <a-steps :current="1">
    <a-step>
      <!-- <span slot="title">Finished</span> -->
      <template slot="title">
        Finished
      </template>
      <span slot="description">This is a description.</span>
    </a-step>
    <a-step title="In Progress" sub-title="Left 00:00:08" description="This is a description." />
    <a-step title="Waiting" description="This is a description." />
  </a-steps>
    <input type="text" v-model="val">
    <h3>{{val}}</h3>
    <h3>abc={{abc}}</h3>
    <h2>{{'vuex的name = ' + name}}</h2>
    <el-button type="primary" @click="setData">主要按钮</el-button>
    <h3>{{'asdfg' | toUpperCase}}</h3>
    <h2 class="bg"><i class="fa fa-floppy-o"></i>图标</h2>
    <i class="el-icon-platform-eleme"></i>
    <img alt="Vue logo" src="../assets/logo.png">
    <img alt="Vue logo" src="@/static/img/demo.png"/>
    <h2 v-for="item in peoples" :key="item.name">{{item.name + item.age}}</h2>
    <div class="box"></div>
    <HelloWorld :msg="'Welcome to Your Vue.js + TypeScript App'" @handleClick="handleClick"/>
  </div>
</template>

<script lang="ts">
// 忽略全局ts 语法检查和忽略ts下一行检查
// @ts-ignore
// tslint:disable-next-line:no-string-literal
import { mapState } from 'vuex';
import { Component, Vue, Watch } from 'vue-property-decorator';
import {LoginO} from '@/axios/request';
import HelloWorld from '@/components/HelloWorld.vue';
@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {
  private val: number = 123;
  private name: number = 222222222222;
  private peoples: object[] = [
    {
      id: 1,
      name: '张三',
      age: 12,
    },
    {
      id: 2,
      name: '李四',
      age: 34,
    },
  ];
  @Watch('val')
  private getval(old: any, newl: any) {
    console.log(old, newl);
  }
  // 计算属性，不需要再加computed
  get abc() {
    return this.val + 10000;
  }

  get inters() {
    return this.$store.getters.inters;
  }

  private created() {
    console.log('=======');
    console.log(this.$store);
    console.log($('#app'));
    const params = {userName: 'admin', password: '123'};
    LoginO(params).then((res) => {
      console.log(res);
    });
  }

  private handleClick(val: string): void {
    console.log(val);
  }
  private setData(): number {
    this.val = 2124412;
    console.log(this.inters);
    // vuex 模块设置与获取
    this.$store.commit('setVal', '哈哈哈哈');
    this.$store.commit('a/init_a', [1, 2, 3]);
    this.$store.commit('b/init_b', [4, 5, 6]);

    console.log(this.$store.getters.name);
    console.log(this.$store.getters['a/refreshTime']);
    console.log(this.$store.getters['b/refreshTime']);
    // this.increment('dsadsad2');
    return 111;
  }
}
</script>
<style lang="scss" scoped>
  .box {
    width: 400px;
    height: 300px;
    background: url('../static/img/demo.png');
  }
</style>